<template>
	<view class="wanlshop-classify-container">
		<block v-if="categoryStyle === 1">
			<scroll-view :style="{height: `${mainHeight}px`}" scroll-y class="wanlshop-classify-container__one">
				<view class="item" v-for="(item,index) in categoryData" :key="item.id"
					@tap="handleProduct(item.id, item.name)">
					<image :src="$wanlshop.oss(item.image, 350, 150)" class="list-image" />
					<view class="category-title">
						<view>{{ item.description }}</view>
						<text class="text-sm text-bold text-black">- {{ item.name }} -</text>
					</view>
				</view>
			</scroll-view>
		</block>
		<!-- v-else-if="categoryStyle === 5" -->
		<block v-else-if="categoryStyle === 5">
			<view class="wanlshop-classify-container__list" style="padding-top: -90px;">
				<scroll-view scroll-y scroll-with-animation class="left" :scroll-top="scrollTop"
					:style="{ height: `${mainHeight}px`}">
					<view v-for="(item,index) in categoryData" class="item"
						:class="[currentTab == index ? 'active' : '']" :data-current="index" @click="getGoods(item.id)"
						@tap.stop="handleNav">
						<text>{{ item.name }}</text>
					</view>
					<view class="edgeInsetBottom"></view>
				</scroll-view>
				<block>
					<scroll-view scroll-y class="right" :style="{ height: `${mainHeight}px` }">
						<view class="pl-box">
							<view class="vname">
								<view class="xokk">销量</view>
								<view class="jiafs">价格</view>
								<view class="upso">
									<text class="wlIcon-sheng wlIcon-sheng"></text>
									<text class="wlIcon-jiang wlIcon-jiang"></text>
								</view>
							</view>
							<view class="dpname">店铺会员</view>
						</view>
						<view class="list-cat" v-for="(item, index) in listData" :key="item.id">
							<view class="padding-top-sm">
								<view class="goodsList">
									<image :src="$wanlshop.oss(item.image, 125, 125)" mode="aspectFill"
										:class="item.is_chufang == 1 ? 'chufangyao' : ''" />

									<view class="goodsCon">
										<view class="goodsName">{{item.title}}</view>
										<view class="goodsNum">销量{{item.sales}}</view>
										<view class="goodscon">
											<view class="goodsMoney">￥{{item.price}}</view>
											<view class="add" @tap="SubmitData('addToCart',null,item.id)">
												<view class="wlIcon-gouwuche"></view>
											</view>
										</view>
									</view>
								</view>

								<view class="edgeInsetBottom"></view>
							</view>
						</view>
					</scroll-view>
				</block>
			</view>
		</block>
		<view class="foot-t">
			<view class="cartBox" @click="cartShow">
				<view class="catNum">{{totalNumber}}</view>
				<view class="wlIcon-gouwuche carticon"></view>
			</view>
			<view class="rcon">
				<view class="wos">
					<view class="money">￥{{totalPrice}}</view>
					<view class="num">共{{totalNumber}}件</view>
				</view>
				<view class="sub" @tap="settlement()">提交订单</view>
			</view>
		</view>

		<block v-if="cartType">
			<view class="black cart" @click="cartShow">
				<view class="white" @click.top="" style="z-index: 999999999;">
					<view class="cartMore" v-for="(item,index) in matchingCartItem.products" :key="index">
						<image :src="$wanlshop.oss(item.image, 125, 125)" mode="aspectFill"></image>
						<view class="cartList">
							<view class="cartName">{{item.title}}</view>
							<view class="cartSku">规格：{{ item.sku.difference.join(' ') }}</view>
							<view class="cartDetail">
								<view class="cartPrice">￥{{ item.sku.price }}</view>
								<view class="editNum">
									<view class="wlIcon-jian iconEdit" @tap.stop="bcsub(item)"></view>
									<view class="numbers">{{ item.number}}</view>
									<view class="wlIcon-tianjia iconEdit" @tap.stop="bcadd(item)"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="nulls"></view>
				</view>
			</view>
		</block>
		<view class="cu-modal bottom-modal" :class="modalName == 'option' ? 'show' : ''" @tap="hideModal()">
			<view class="cu-dialog" @tap.stop="">
				<view class="option wanl-modal">
					<view class="head text-left padding-bj solid-bottom">
						<view class="cu-avatar radius-bock margin-right"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(selectshop.thumbnail || goodsData.image, 100, 100) + ')' }">
						</view>

						<view>
							<view class="text-price wanl-orange text-xl margin-bottom-xs">
								{{ selectshop.price || goodsData.interval_price }}
							</view>
							<view v-if="selectArr.join('')" class="wanl-gray margin-bottom-xs">
								库存 <text class="margin-lr-xs">{{ selectshop.stock || 0 }}</text> 件
							</view>
							<view class="text-sm">
								<view v-if="selectArr.join('')">
									<text class="margin-right-bj">已选择</text>
									<text class="margin-right-xs" v-for="(name, key) in selectArr"
										:key="key">{{ $base64.decode(name) }}</text>
								</view>
								<view v-else>
									请选择：
									<text class="wanl-gray-light" v-for="(item, index) in goodsData.spu" :key="item.id">
										<block v-if="index != 0">-</block>
										{{ $base64.decode(item.name) }}
									</text>
								</view>
							</view>
						</view>

						<view class="close wlIcon-31guanbi" @tap="hideModal()"></view>
					</view>
					<!-- 1.0.8升级 -->
					<scroll-view scroll-y="true" :style="{maxHeight: wanlsys.screenHeight / 2 + 'px'}">
						<view class="opt text-left padding-bj solid-bottom" v-for="(value, spukey) in goodsData.spu"
							:key="value.id">
							<view class="text-df">{{ value.name }}</view>
							<view class="tag">
								<view class="cu-tag text-sm" v-for="(item, index) in value.item" :key="index"
									:class="[item.ishow ? '' : 'noactive', subIndex[spukey] == index ? 'active' : '']"
									@tap="skuClick(item, spukey, $event, index)">
									{{ $base64.decode(item.name) }}
								</view>
							</view>
						</view>
						<view class="number padding-bj">
							<view class="text-df">购买数量</view>
							<uni-number-box :min="1" :max="selectshop.stock" :value="selectNum" :disabled="canCount"
								@change="changeNum"></uni-number-box>
						</view>
					</scroll-view>

					<view class="foot padding-lr-bj">
						<button v-if="isChoice" class="cu-btn bg-gradual-orange round text-bold complete"
							@tap="completeSelection">完成</button>
						<block v-else>
							<button class="cu-btn bg-gradual-yellow round-left text-bold"
								@tap="SubmitData('addToCart', 1)">加入购物车</button>
							<button class="cu-btn bg-gradual-orange round-right text-bold"
								@tap="SubmitData('placeOrder', 1)">立即订购</button>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		name: 'wanlShopClassify',
		props: {
			shopId: {
				type: Number,
				default: 0
			},
			categoryStyle: {
				type: Number,
				default: 1
			},
			mainHeight: {
				type: Number,
				default: 0
			},
			adverData: {
				type: Object,
				default () {}
			},
			categoryData: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		data() {
			return {
				goods_id: 0,
				TabCur: 0,
				wanlsys: {},
				modalName: null, // 弹出层
				durect: 0, // 角标
				headerOpacity: 0, //不透明度
				currentSwiper: 0, // 轮播图右下角数字
				anchorlist: [{
					name: '主图',
					top: 0
				}, {
					name: '评价',
					top: 0
				}, {
					name: '详情',
					top: 0
				}, {
					name: '推荐',
					top: 0
				}], //导航条锚点
				selectAnchor: 0,
				//产品数据
				goodsData: {
					id: 0,
					category_id: 0,
					shop_id: 0,
					brand_id: 0,
					freight_id: 0,
					title: '',
					image: '',
					images: '',
					flag: '',
					content: '',
					category_attribute: [],
					activity_type: 'goods',
					price: null,
					interval_price: null,
					market_price: null,
					sales: 0,
					brand: {},
					freight: {
						name: '',
						isdelivery: 1
					},
					payment: 0,
					comment: 0,
					praise: 0,
					moderate: 0,
					negative: 0,
					like: 0,
					views: 0,
					status: '',
					category: {},
					follow: true,
					sku: [],
					spu: [],
					promotion: [],
					coupon: [],
					comment_list: {
						data: [],
						figure: 0,
						tag: []
					},
					shop: {
						find_user: {
							fans: 0
						},
						city: ''
					},
					shop_recommend: {}
				},
				// 猜你喜欢
				reload: true,
				likeData: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				// 商品规格组合
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				selectArr: [], //存放被选中的值
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				selectshop: {}, //存放最后选中的商品
				selectNum: 1, //选中数量
				isChoice: '', // 是否从选择进入
				scrollAnimation: 100, //分享滚动
				pagesNum: 0, //1.1.9 升级 页面数量
				currentTab: 0, //预设当前项的值
				scrollTop: 0, //tab标题的滚动条位置
				goodsList: [],
				listData: [],
				skuType: false,
				quantity: 1,
				skuNum: null,
				cartType: false,
				modalName: null, // 弹出层
				isChoice: '', // 是否从选择进入
			}
		},
		onLoad() {

		},
		mounted() {

			this.getGoods(this.categoryData[0].id)
		},
		computed: {
			canCount() {
				return this.subIndex.some(item => item === -1);
			},
			...mapState(['common', 'cart']),
			matchingCartItem() {
				return this.cart.list.find(item => item.shop_id === this.shopId) || null;
			},
			totalNumber() {
				// 如果 matchingCartItem 存在且 products 是数组，则计算 number 总和
				if (this.matchingCartItem && Array.isArray(this.matchingCartItem.products)) {
					return this.matchingCartItem.products.reduce((sum, product) => sum + product.number, 0);
				}
				return 0; // 返回默认值
			},
			totalPrice() {
				if (this.matchingCartItem && Array.isArray(this.matchingCartItem.products)) {
					return this.matchingCartItem.products.reduce(
						(sum, product) => sum + parseFloat(product.sum),
						0
					).toFixed(2); // 保留两位小数
				}
				return '0.00';
			},
			isLogin() {
				return this.$store.state.user.isLogin;
			},
		},
		methods: {
			...mapActions({
				operate: 'cart/operate', // 管理购物车
				choose: 'cart/choose', // 选择商品
				shopchoose: 'cart/shopchoose', // 选择店铺
				bcadd: 'cart/bcadd', // 添加数量
				bcsub: 'cart/bcsub', // 减少数量
				move: 'cart/move', // 移动购物车
				del: 'cart/del' // 删除选中购物车
			}),
			async settlement() {
				let data = [];
				if (!this.matchingCartItem) {
					uni.showToast({
						title: '请先选择商品',
						icon: 'none', // 设置无图标
						duration: 2000, // 提示持续时间
					});
					return; // 阻止后续操作
				}
				this.matchingCartItem.products.forEach((goods) => {
					data.push({
						goods_id: goods.goods_id,
						number: goods.number,
						sku_id: goods.sku.id,
					});
				});

				// 判断是否登录
				// if (this.isLogin) {
				// 	uni.navigateTo({
				// 		url: `/pages/user/order/addorder?type=cart&data=${JSON.stringify(data)}`
				// 	});
				// } else {
				// 	uni.navigateTo({
				// 		url: `/pages/user/auth/auth`
				// 	});
				// }
			},
			async loadStock(sku_id) {
				await uni.request({
					url: '/wanlshop/product/stock',
					data: {
						sku_id: sku_id
					},
					success: res => {
						this.selectshop.stock = res.data;
					}
				});
			},
			// 完成选择
			completeSelection() {
				if (this.canCount) {
					this.$wanlshop.msg('请选择完成规格');
				} else {
					this.ProcessingData();
				}
			},
			// 商品规格组合 选择
			skuClick(value, spukey, event, index) {
				if (value.ishow) {
					if (this.selectArr[spukey] != value.name) {
						this.$set(this.selectArr, spukey, value.name);
						this.$set(this.subIndex, spukey, index);
					} else {
						this.$set(this.selectArr, spukey, '');
						this.$set(this.subIndex, spukey, -1);
					}
					this.checkInpath(spukey);
					//如果全部选完
					if (this.selectArr.every(item => item != '')) {
						this.selectshop = this.shopItemInfo[this.selectArr];
						// 1.1.3升级
						this.selectshop.difference.map((name, index, arr) => {
							arr[index] = this.$base64.decode(name)
						})
						this.loadStock(this.selectshop.id);
						this.selectNum = 1;
					}
				}
			},
			//计算锚点高度
			calcAnchor() {
				let query = null;
				// // 支付宝小程序不能加后面的.in(this)，是它自身的限制
				// // #ifndef MP-ALIPAY
				// query = uni.createSelectorQuery().in(this)
				// // #endif
				// // #ifdef MP-ALIPAY
				// query = uni.createSelectorQuery()
				// // #endif
				// query.select('#evaluate').boundingClientRect(rec => {
				// 	this.anchorlist[1].top = rec.top - this.wanlsys.height - 45;
				// }).exec();
				// query.select('#details').boundingClientRect(rec => {
				// 	this.anchorlist[2].top = rec.top - this.wanlsys.height - 45;
				// }).exec();
				// query.select('#recommend').boundingClientRect(rec => {
				// 	this.anchorlist[3].top = rec.top - this.wanlsys.height - 45;
				// }).exec();
			},
			// 关闭弹出层
			hideModal(name) {
				console.log(this.totalNumber, '8888888888888888888888');
				if (name) {
					this.showModal(name);
				} else {
					// 强制关闭海报
					if (this.modalName == 'share') {
						this.$refs.wanlShare.closePoster();
					}
					this.modalName = null;
				}
			},
			async loadData(goods_id) {
				//加载商品
				await uni.request({
					url: '/wanlshop/product/goods',
					data: {
						id: goods_id
					},
					success: res => {
						//详情正则
						res.data.content = res.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (
							match, capture) => {
							var img =
								`<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
							return img;
						});
						// 价格区间
						if (res.data.sku.length == 0) {
							res.data.interval_price = res.data.price;
							res.data.market_price = res.data.price;
						} else {
							let price = [],
								market_price = [];
							for (let value of res.data.sku) {
								price.push(value.price);
								market_price.push(value.market_price);
							}
							let minPrice = Math.min.apply(null, price),
								maxPrice = Math.max.apply(null, price),
								maxMarketPrice = Math.max.apply(null, market_price);
							res.data.interval_price = minPrice == maxPrice ? Number(minPrice).toFixed(2) :
								(minPrice + '-' + Number(maxPrice).toFixed(2)); //区间价格
							res.data.market_price = Number(maxMarketPrice).toFixed(2); //最大市场价
						}
						this.goodsData = res.data;
						// 商品规格组合

						this.goodsData.spu.map(item => {
							// 1.1.3升级
							item.item.map((name, key, arr) => {
								arr[key].name = this.$base64.encode(arr[key].name)
							});
							this.selectArr.push('');
							this.subIndex.push(-1);
						});
						// 1.1.3升级
						this.goodsData.sku.map(item => {
							item.difference.map((name, index, arr) => {
								arr[index] = this.$base64.encode(name)
							});
						});
						this.checkItem(); //计算sku里面规格形成路径
						this.checkInpath(-1); //传-1是为了不跳过循环
						// 计算锚点高度
						setTimeout(() => {
							this.calcAnchor();
						}, 1000);
					}
				});
			},
			changeNum(val) {
				if (this.selectshop.stock) {
					let num = parseInt(val);
					if (num > this.selectshop.stock) {
						this.$wanlshop.msg(`数量不能超过库存 ${this.selectshop.stock} 件`);
						this.selectNum = parseInt(this.selectshop.stock);
					} else {
						this.selectNum = parseInt(val);
					}
				}
			},
			resetData() {
				// 使用深拷贝将初始值恢复
				this.shopItemInfo = {}
				this.selectArr = []
				this.subIndex = []
				this.selectshop = {}
				this.selectNum = 1,
					this.goodsData.spu = []
				this.goodsData.sku = []
			},
			SubmitData(name, type, goods_id) {
				this.resetData()
				this.loadData(goods_id)
				if (type == 1) {
					if (this.canCount) {
						this.$wanlshop.msg('请选择完成规格');
					} else {
						this.isChoice = name;
						this.ProcessingData();
					}
				} else {
					this.modalName = 'option';
					this.isChoice = name;
				}
			},
			ProcessingData() {
				if (this.isChoice == 'addToCart') {
					this.$store.dispatch('cart/add', {
						shop_id: this.goodsData.shop_id,
						shop_name: this.goodsData.shop.shopname,
						goods_id: this.goodsData.id,
						title: this.goodsData.title,
						number: this.selectNum,
						image: this.goodsData.image,
						sku: this.selectshop,
						sku_id: this.selectshop.id,
						sum: this.$wanlshop.bcmul(this.selectshop.price, this.selectNum)
					});
					this.$wanlshop.msg('已加购物车');
				} else if (this.isChoice == 'placeOrder') {
					let goodsData = [{
						goods_id: this.goodsData.id,
						number: this.selectNum,
						sku_id: this.selectshop.id
					}];
					// 提交订单 
					if (this.$store.state.user.isLogin) {
						console.log(JSON.stringify(goodsData))
						console.log('下一页')
						uni.redirectTo({
							url: `/pages/user/order/addorder?order_type=groups&data=${JSON.stringify(goodsData)}`
						});
					} else {
						this.$wanlshop.to('/pages/user/auth/auth');
					}

				} else {
					this.$wanlshop.msg('数据异常');
				}
				this.hideModal();
			},
			checkItem() {
				let result = this.goodsData.sku.reduce(
					(arrs, items) => {
						return arrs.concat(
							items.difference.reduce(
								(arr, item) => {
									return arr.concat(
										arr.map(item2 => {
											//利用对象属性的唯一性实现二维数组去重
											if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
												this.shopItemInfo[[...item2, item]] = items;
											}
											return [...item2, item];
										})
									);
								},
								[
									[]
								]
							)
						);
					},
					[
						[]
					]
				);
			},
			getGoods(category_id) {
				uni.request({
					url: '/wanlshop/shop/goods',
					method: 'GET',
					data: {
						shop_category_id: category_id,
						shop_id: this.shopId
					},
					success: res => {
						this.listData = res.data

					}
				});
			},
			changeQuantity(change) {
				if (this.quantity + change >= 1) {
					this.quantity += change;
				}
			},
			checkInpath(clickIndex) {

				//当前选中的兄弟节点和已选中属性不需要循环
				for (let i = 0, len = this.goodsData.spu.length; i < len; i++) {
					if (i == clickIndex) {
						continue;
					}
					let len2 = this.goodsData.spu[i].item.length;
					for (let j = 0; j < len2; j++) {
						if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
							continue;
						}
						let choosed_copy = [...this.selectArr];
						this.$set(choosed_copy, i, this.goodsData.spu[i].item[j].name);
						let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
						if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', true);
						} else {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', false);
						}
					}
				}
				// console.log(this.goodsData.spu)
			},
			selectSku() {
				this.skuType = !this.skuType
			},
			cartShow() {
				this.cartType = !this.cartType
			},
			selectTab(index) {
				this.skuNum = index
			},
			// 点击标题切换当前页时改变样式
			getList(id) {
				uni.request({
					url: '/wanlshop/common/category',
					method: 'GET',
					data: {
						id: id,
						page: 1
					},
					success: res => {
						console.log(res.data)
						this.goodsList = res.data.goods.data
					}
				});
			},
			handleNav(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur;
					this.checkCor();
				}
			},
			handleProduct(category_id, category_name) {
				if (this.shopId === 0) {
					this.$wanlshop.to(
						`/pages/product/list?data=${JSON.stringify({ category_id: category_id, category_name: category_name })}`
					);
				} else {
					this.$wanlshop.to(
						`/pages/shop/product/list?shop_id=${this.shopId}&category_id=${category_id}&category_name=${category_name}`
					);
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor() {
				if (this.currentTab > 7) {
					this.scrollTop = 500;
				} else {
					this.scrollTop = 0;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wanlshop-classify-container {
		&__one {
			padding-left: 25rpx;
			padding-right: 25rpx;
			padding-bottom: 100rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);

			image {
				width: 100%;
				height: 300rpx;
				border-radius: 15rpx;
				overflow: hidden;
			}

			.item {
				position: relative;
				display: flex;
				justify-content: center;
				margin-top: 25rpx;

				.category-title {
					font-size: 26rpx;
					position: absolute;
					bottom: 20rpx;
					border-radius: 10rpx;
					overflow: hidden;
					color: #666666;
					background-color: rgba(255, 255, 255, .6);
					width: 60%;
					text-align: center;
					padding: 4rpx 0;
				}
			}
		}

		&__grid {
			padding-bottom: 100rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);

			.cu-list {
				background-color: rgba(255, 255, 255, 0);

				&>.cu-item {
					padding: 25rpx 0;
					align-items: center;

					image {
						width: 160rpx;
						height: 160rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}

		&__list {
			display: flex;

			.left {
				width: 200rpx;
				z-index: 10;
				background: #fbfbfb;

				.item {
					width: 200rpx;
					height: 110rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color: #444;
					font-weight: 400;

					&.active {
						position: relative;
						color: #000;
						font-size: 30rpx;
						font-weight: 600;
						background: white;

						&::before {
							content: '';
							position: absolute;
							border-left: 6rpx solid #84BD00;
							height: 32rpx;
							left: 0;
						}
					}
				}
			}

			.right {
				width: 100%;
				padding-left: 25rpx;
				box-sizing: border-box;

				/* background-image: linear-gradient(#fff, #f2f2f2, #f4f4f4, #f6f6f6); */
				.list-cat {
					width: 100%;
					overflow: hidden;
					padding-top: 10rpx;
					padding-right: 20rpx;
					box-sizing: border-box;
				}

				.screen-swiper {
					min-height: 180rpx;
					height: 180rpx;
					overflow: hidden;
				}

				.list-item {
					background: #ffffff;
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx;
					margin-bottom: 20rpx;

					.title {
						color: 4289F3;
					}
				}

				.list-container {
					/* padding-top: 20rpx; */
					display: flex;
					display: -webkit-flex;
					justify-content: flex-start;
					flex-direction: row;
					flex-wrap: wrap;
				}

				.list-box {
					width: 33.3333%;
					text-align: center;
					padding-top: 40rpx;
				}

				.list-image {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}
	}

	.goodsList {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			width: 182rpx;
			height: 182rpx;
		}

		.goodsCon {
			width: 300rpx;
			height: 172rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;

			.goodsName {
				width: 100%;
				font-size: 26rpx;
				color: #333;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 设置显示的行数 */
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.goodsNum {
				width: 100%;
				font-size: 24rpx;
				color: #999;
			}

			.goodscon {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.goodsMoney {
					font-size: 33rpx;
					color: #FF4800;
					font-weight: bold;
				}

				.add {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #84BD00;
					color: #fff;
				}
			}


		}
	}

	.foot-t {
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		position: fixed;
		bottom: calc(env(safe-area-inset-bottom) + 100rpx);
		z-index: 9999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px 17px 50px 0px rgba(0, 0, 0, 0.13);

		.cartBox {
			display: flex;
			position: relative;

			.catNum {
				padding: 4rpx 10rpx;
				border-radius: 50rpx;
				background-color: #f00;
				font-size: 24rpx;
				color: #fff;
				position: absolute;
				top: -16rpx;
				right: -16rpx;
			}

			.carticon {
				font-size: 50rpx;
				margin-left: 80rpx;
			}
		}

		.rcon {
			display: flex;
			align-items: center;
			margin-right: 30rpx;

			.wos {
				text-align: right;
				margin-right: 20rpx;

				.money {
					font-size: 36rpx;
					color: #84BD00;
					font-weight: bold;
				}

				.num {
					font-size: 22rpx;
					color: #999999;
				}
			}

			.sub {
				width: 268rpx;
				height: 82rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #84BD00;
				color: #fff;
				border-radius: 50rpx;
			}
		}
	}

	.black {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0;
		left: 0;

		.white {
			// z-index: 99999;
			width: 100%;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			position: fixed;
			bottom: 100rpx;
			padding-top: 30rpx;
			margin-bottom: 96rpx;

			.cartMore {
				width: 690rpx;
				display: flex;
				align-items: center;
				margin-left: 30rpx;
				margin-bottom: 30rpx;

				image {
					width: 158rpx !important;
					height: 158rpx !important;
					border-radius: 16rpx;
				}

				.cartList {
					width: 512rpx;
					margin-left: 20rpx;
					height: 148rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					.cartName {
						width: 100%;
						font-size: 30rpx;
						color: #3D3D3D;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.cartSku {
						width: 100%;
						font-size: 30rpx;
						color: #999999;
					}

					.cartDetail {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.cartPrice {
							font-size: 36rpx;
							color: #ED4D07;
							font-weight: bold;
						}

						.editNum {
							display: flex;
							align-items: center;
							margin-right: 30rpx;

							.iconEdit {
								font-size: 40rpx;
							}

							.numbers {
								padding: 10rpx 50rpx;
								margin-left: 20rpx;
								margin-right: 20rpx;
								background-color: #f6f6f6;
							}
						}
					}
				}

			}

			.nulls {
				width: 700rpx;
				height: 100rpx;
			}

			.goodsBox {
				width: 690rpx;
				display: flex;
				align-items: center;
				position: relative;
				margin-left: 30rpx;

				.closeicon {
					font-size: 40rpx;
					position: absolute;
					top: 0;
					right: 0;
				}

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}

				.cons {
					margin-left: 20rpx;

					.goodsPirce {
						font-size: 36rpx;
						color: #4289F3;
					}

					.goodssku {
						font-size: 30rpx;
						color: #999;
						margin-top: 16rpx;
					}
				}

				.money {
					font-size: 36rpx;
					color: #333333;
				}
			}

			.skuBox {
				width: 750rpx;
				margin-top: 30rpx;
				border-top: 1px solid #d8d8d8;

				.skuTitle {
					width: 690rpx;
					line-height: 90rpx;
					font-size: 30rpx;
					margin-left: 30rpx;
				}

				.skuMore {
					width: 690rpx;
					margin-left: 30rpx;
					display: flex;
					flex-wrap: wrap;

					view {
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						padding: 12rpx 20rpx;
						border-radius: 10rpx;
						font-size: 28rpx;
						background-color: #f6f6f6;
					}

					.selectSku {
						background-color: #FF4800;
						color: #fff;
					}
				}
			}

			.cartCon {
				width: 750rpx;
				border-top: 1px solid #d8d8d8;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;
				height: 150rpx;

				.cartTitle {
					font-size: 30rpx;
					margin-left: 30rpx;
				}

				.editNum {
					display: flex;
					align-items: center;
					margin-right: 30rpx;

					.iconEdit {
						font-size: 40rpx;
					}

					.numbers {
						padding: 10rpx 50rpx;
						margin-left: 20rpx;
						margin-right: 20rpx;
						background-color: #f6f6f6;
					}
				}
			}

			.ok {
				width: 690rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 30rpx;
				background-color: #FF4800;
				border-radius: 50rpx;
				color: #fff;
			}
		}
	}

	.wanl-modal {
		position: relative;
		min-height: 500rpx;
		max-height: 1200rpx;
		padding-bottom: 128rpx;
		padding-bottom: calc(300rpx + env(safe-area-inset-bottom)) !important;

		.foot {
			bottom: 98px !important;
			position: absolute;
			padding-top: 25rpx;
			width: 100%;
			height: calc(138rpx + env(safe-area-inset-bottom));
		}
	}

	.cart {
		z-index: 99;
	}

	.pl-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;

		.vname {
			display: flex;
			align-items: center;

			.xokk {
				font-size: 24rpx;
				color: #999999;
			}

			.jiafs {
				font-size: 24rpx;
				color: #999999;
				margin-left: 52rpx;
			}

			.upso {
				display: flex;
				flex-direction: column;
				height: 42rpx;
				line-height: 1;

				text {
					color: #cccccc;
					margin: 0 10rpx;
					font-weight: bold;
					font-size: 22rpx;
				}
			}
		}

		.dpname {
			margin-right: 20rpx;
			width: 118rpx;
			height: 38rpx;
			border-radius: 10rpx;
			background: rgba(66, 137, 243, 0.1);
			font-size: 24rpx;
			color: #84BD00;
			text-align: center;
			line-height: 38rpx;
		}
	}
</style>